<template>
<div class="bottom-bar">
   <div class="chenck-content">
        <CheckButton class="check-button" :is-checked="isSelectAll"
        @click.native="checkClick"/>
    <span>全选</span>
   </div>

   <div class="total-price">合计:{{totalPrice}}</div>
   <div class="calculate" @click="calcClick">去计算({{checkLength}})</div>

    </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex';
import CheckButton from "./CheckButton.vue";

export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },
  computed:{
    ...mapGetters(['cartList']),
    totalPrice(){
      return '￥' + this.cartList.filter(item=>{
        return item.checked
      }).reduce((preValue,item)=>{
        return  preValue + item.price * item.count

      },0).toFixed(2)
    },
    checkLength(){
      return this.cartList.filter(item=>item.checked).length
    },
    isSelectAll(){
      if(this.cartList.length === 0) return false
      return !this.cartList.find(item => !item.checked)
    }
  },
  methods:{
    checkClick(){
      if(this.isSelectAll){
        this.cartList.forEach(item => item.checked = false)
      }else{
        this.cartList.forEach(item => item.checked =true)
      }
    },
    calcClick(){
      if(!this.isSelectAll){
        this.$toast.show('请选择购买的商品',1500)
      }
    }
  }
};
</script>

<style scoped>
.bottom-bar {
  height: 40px;
  line-height: 40px;
  background-color: #eee;
  position: relative;
  display: flex;
  font-size: 15px;

}
.chenck-content{
  display: flex;
  align-items: center;
  margin-left: 10px;
  width: 60px;
 
}
.check-button {
width: 22px;
height: 22px;
line-height: 20px;
margin-right: 5px;

}
.total-price{
  margin-left: 30px;
  flex: 1;
}
.calculate{
  background-color: pink;
  width: 90px;
  text-align: center;
  color: #fff;

}
</style>